<template>
  <div class="app-container">

    <el-button type="danger">下载图片</el-button>
    <div class="jianbao">
      <div class="top">
        <div class="date_style">
          <span>{{todayDate}}</span>/
          <span>星期{{weekDay}}</span>/
          <span>{{nongli}}</span>
        </div>
        
      </div>
      <!-- 新闻列表 -->
      <div class="news_items" v-for='(news,index) in itemNews' :key="index">
        <!-- 标题 -->
        <div class="news_items_title">
          <div class="minlaba">
            <img
              src="~@/assets/images/minlaba.png"
              width="30px"
              height="30px"
            />
          </div>
          <div class="title">
            {{index+1}}.{{news.title}}
          </div>
        </div>
        <!-- 内容 -->
        <div class="news_items_content">
          {{news.digest}}
        </div>
        <!-- 水平线 -->
        <div class="spx"></div>
      </div>
      
      <!-- 每日早安寄语 -->
      <div class="googmorning" >
        <!-- 内容 -->
        <div class="news_items_content">
          👉👉【早安寄语】{{goodMorningInfo}}
        </div>
        <!-- 水平线 -->
        <div class="spx"></div>
      </div>


      <!-- 底部 -->
      <div class="bottom">
        <div class="bottom_info">
           <div>扫码添加好友进群,回复<span style="color:red;">【新闻】</span></div>
          <p>&copy;穆雄雄:https://www.穆雄雄.com</p>
          <p>更多详情：https://www.88688.team</p>
        </div>
        <div class="bottom_qc">
           <img src="~@/assets/images/qc_user.png" width="80px" height="80px">   
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDaysNewsConvertImage,
  getGoodMorning,
  getTodaysInfo
} from '@/api/articles'

import html2canvas from "html2canvas"


export default {
  data() {
    return {
      //每日新闻
      itemNews:[],
      //早安寄语
      goodMorningInfo:'',
      //今天的日期
      todayDate:'',
      //周
      weekDay:'',
      //农历
      nongli:'',
    };
  },
  created(){
    this.getDaysNews();
    this.getGoodMorning();
    this.getTodays();
  },
  computed: {
  },
  methods: {
    //获取每日新闻的信息
    getDaysNews(){
      getDaysNewsConvertImage().then(res=>{
         this.itemNews = res.data.data; 
      });

    },

    //获取每日早安寄语
    getGoodMorning(){
      let tx_key = 'd496bfa7ecbc2fba042960bc4d1cd3bb';
      getGoodMorning(tx_key).then(res=>{
         this.goodMorningInfo = res.data; 
      });
    },

    //获取今天的日期
    getTodays(){
      getTodaysInfo().then(res=>{
        let data = res.data.data;
         this.todayDate = data.todayDate;
         this.weekDay = data.week;
         this.nongli = data.nongli;
      })
    }

  },
};
</script>

<style scoped>
.jianbao {
  width: 640px;
  overflow: hidden;
  /* background: url('~@/assets/images/bg00.png') no-repeat top; */
}

.top {
  width: 100%;
  padding-left: 3%;
  background: url("~@/assets/images/top.png") no-repeat top;
  background-size: 100% 100%;
  height: 250px;
}

.date_style{
  width: 80%;
  height: 50px;
  margin: 0 auto;
  padding:12% 0 0 16%;
  color:rgb(57, 108, 83);
}

.date_style span{
  font-weight: bolder;
}

.news_items_title {
  width: 95%;
  overflow: hidden;
}

.minlaba {
  width: 9%;
  display: inline-block;
  vertical-align: middle;
  line-height: 45px;
  height: 45px;
}

.title {
  display: inline-block;
  vertical-align: middle;
  color: rgb(57, 108, 83);
  font-weight: 900;
  margin-left: 1%;
  font-size: 20px;
  width: 85%;
  height: 55px;
  line-height: 30px;
}

.news_items_content {
  width: 90%;
  margin-top: 2%;
  line-height: 22px;
  overflow: hidden;
  color: rgb(57, 108, 83);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.news_items {
  width: 100%;
  overflow: hidden;
  padding-left: 10%;
  background: url("~@/assets/images/items_bg1.png") no-repeat top;
  background-size: 100% 100%;
}

.googmorning{
   width: 100%;
  overflow: hidden;
  padding-left: 10%;
  background: url("~@/assets/images/items_bg1.png") no-repeat top;
  background-size: 100% 100%;
  font-weight: 600;
}
.googmorning .news_items_content{
  color: rgb(21, 21, 21);
}

.spx {
  width: 90%;
  margin: 4% 0;
  border-bottom: 1px dashed rgb(57, 108, 83);
}

.bottom {
  width: 100%;
  height: 180px;
  background: url("~@/assets/images/bottom.png") no-repeat top;
  background-size: 100% 100%;
  padding: 9% 0 0 4%;
  color: white;
  font-weight: 700;

}

.bottom_info{
  width: 46%;
  float: left;
  height: 80px;
  
}

 .bottom_qc{
  width: 28%;
  height: 80px;
  float: left;
  margin-left: 13%;
  margin-top: -0.5%;
} 
</style>
